class List{
    constructor(){
        this.url = "http://localhost:3000/api";
        this.cont = document.querySelector(".all-goods");

        this.load();
        // 1. 绑定事件
        this.addEvent();
    }
    addEvent(){
        const that = this;
        // 利用事件委托，绑定添加购物车的点击事件
        this.cont.addEventListener('click',function(eve){
            const e = eve || window.event;
            const target = e.target || e.srcElement;
            if(target.className === "add"){
                // 2. 获取当前商品的id
                that.id = target.parentNode.getAttribute("index")
                // console.log(that.id);
                // 3. 将数据存到本地存储中
                that.setLocal();
            }
        })
    }
    setLocal(){
        // 设定的数据的格式
        // 多个商品的数据：[{id:"i17234rufgiv",num:2},{id:,num:},{...},{},...]

        // 先读
        const goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];

        // 判断是否是第一次添加购物车
        if(goods.length < 1){
            // 第一次加入购物车：直接添加数据
            goods.push({
                id:this.id,
                num:1
            })
        }else{
            // 不是第一次加入购物车：
            // 遍历
            let i = 0;
            const flag = goods.some((val,idx)=>{
                i = idx;
                return val.id === this.id
            })
            // 判断本次添加的是否是新商品
            if(flag){
                // 是老商品：增加指定商品的数量
                goods[i].num++;
            }else{
                // 不是老商品：增加数据
                goods.push({
                    id:this.id,
                    num:1
                })
            }
        }
        
        // 再存回去
        localStorage.setItem("goods", JSON.stringify(goods))
    }
    load(){
        ajax({
            url:this.url,
            data:{
                type:"getGoods"
            },
            success:res=>{
                this.res = JSON.parse(res).msg;
                this.render();
            }
        })
    }
    render(){
        let str = "";
        this.res.forEach(val=>{
            str += `<div class="all-g1" index="${val.proId}">
            <a href="./goods2.html?${val.proId}">
            <img src="${val.img}" alt=""><br>
            </a>
            <a href="./goods2.html?${val.proId}" class="all-g-1">
                <img src="${val.img1}" alt="">
                ${val.proName}
            </a>
            <div class="qu">券${val.quan}</div>
            <span>￥${val.price}</span>
            <span class="s">已售${val.shou}件</span>
            <input type="button" class="add" value="加入购物车">
        </div>`
        })
        this.cont.innerHTML = str;
    }
}

new List();





require.config({
    baseUrl:"./",
    paths:{
        jq: "./libs/jquery",
        gg: "./modules/getGoods",
        ir: "./modules/indexRender",
        sl: "./modules/setLocal"
    }
})


require(["jq","gg","ir","sl"],function(_, getGoods, render, setLocal){
    // console.log($);
    const url = "http://localhost:3000/api";
    const cont = $(".cont");

    // 1. 请求数据
    getGoods(url, res=>{
        res = JSON.parse(res).msg;
        // console.log(res);
        // 2. 渲染页面
        render(res, cont);
    })
    // 3. 绑定事件
    cont.on("click",".add",function(){
        const id = $(this).parent().attr("index");
        // 获取当前商品的价格，存入本地存储，方便计算总价
        const price = $(this).prev().html()-0;
        // console.log(id)
        // 4. 将点击商品信息存如本地存储
        setLocal(id, price);
    })
})
